<template>
    <div class='indexnav'>
        <ul>
            <li>
                <i class="iconfont icon-xinpin"></i>
                <p>新品</p>
            </li>
            <li>
                <i class="iconfont icon-phone"></i>
                <p>手机</p>
            </li>
            <li>
                <i class="iconfont icon-dianshi-"></i>
                <p>电视</p>
            </li>
            <li>
                <i class="iconfont icon-diannao"></i>
                <p>电脑</p>
            </li>
          
            <li>
                <i class="iconfont icon-31tianmaojiadian"></i>
                <p>家电</p>
            </li>
             </ul>
            <ul>
            <li>
                <i class="iconfont icon-luyou"></i>
                <p>路由</p>
            </li>
           
            <li>
                <i class="iconfont icon-zhinenghua"></i>
                <p>智能</p>
            </li>
            <li>
                <i class="iconfont icon-yonghu"></i>
                <p>儿童</p>
            </li>
            <li>
                <i class="iconfont icon-dianyuan"></i>
                <p>电源</p>
            </li>
             <li>
                <i class="iconfont icon-fenlei"></i>
                <p>分类</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {

}
</script>

<style lang='scss' scoped>
 $appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}

.indexnav{
    position:absolute;
    top: pxtovw(250);
    width:100%;
    height: pxtovw(140);


    background: white;
    ul{
        height: pxtovw(70);
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        li{
            font-size:pxtovw(12);
            i{
                color: orange;
              font-size:pxtovw(16);

            }
        }
         
    }
}
</style>
